* {
    margin: 0;
    padding: 0;
}
body {
    overflow: hidden;
}
#view {
    width: 500px;
    height: 500px;
    margin: 0px auto;
    position: relative;
}
/* 头 */
#head {
    width: 160px;
    height: 175px;
    margin: auto;
    background-color: #ffe100;
    position:absolute;
    top: 10%;
    left: 35%;
    border-top-left-radius: 45% 43%;
    border-top-right-radius: 45% 43%;
    border-bottom-left-radius: 50% 35%;
    border-bottom-right-radius: 50% 35%;
    border: 4px solid #000;
    border-bottom-color: #ffe100;
}
#body {
    width: 170px;
    height: 185px;
    background-color: #ffe100;
    position: absolute;
    top: 38%;
    left: 34%;
    border-bottom-left-radius: 45% 43%;
    border-bottom-right-radius: 45% 43%;
    border-top-left-radius: 30% 90%;
    border-top-right-radius: 30% 90%;
    border: 4px solid #000;
}
.ear_left {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 300px;
    background-color: #ffe100;
    border-radius: 100px 0px;
    border: 4px solid #000;
}
.ear_right {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 100px;
    background-color: #ffe100;
    border-radius:  0px 100px;
    border: 4px solid #000;
}
/* 右耳朵黑色阴影 */
.ear_shading_right {
    width: 38px;
    height: 77px;
    background-color: #000;
    border-radius: 14% 0% 100% 0%;
    position:absolute;
    left: 370px;
    top: 3px;
}
 /* 右耳朵黑色阴影 */
.ear_shading_left{
    width: 38px;
    height: 77px;
    background-color: #000;
    border-radius: 0%  14%  0% 100%;
    position:absolute;
    left: 100px;
    top: 3px;
}
/* 左脸蛋 */
.face_left ,
.face_right
{
    width: 45px;
    height: 45px;
    background-color: #ff2200;
    border-radius: 50%;
    margin-top: 100px;
    border: 2px solid #000;
}
.face_left {
    float: left;
}
.face_right {
    float: right;
}
/* 眼睛 */
.eye_right,
.eye_left {
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 110px;
    top: 60px;
}

.eye_left {
    left: 20px;
    top: 60px;
}
/* 眼白 */
.eye_shading_right,
.eye_shading_left {
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 11px;
}
.eye_shading_right {
    left: 5px;
}
/* 鼻子 */
.nose {
    width: 15px;
    height: 10px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 73px;
    top: 88px;
}
/* 嘴巴 */
.mouth_right,
.mouth_left {
    width: 35px;
    height: 30px;
    background-color: #ffe100;
    position: absolute;
    top: 67px;
    left: 72px;
    border-radius: 50%;
    border: 3px solid #ffe100;
    border-bottom-color: #000;
}
.mouth_left {
    left:47px;
}
/* 舌头 */
.tongue {
    width: 23px;
    height: 3px;
    background-color: #ff2200;
    position: absolute;
    top: 102px;
    left: 66px;
    border-bottom-left-radius: 40% 90%;
    border-bottom-right-radius: 40% 90%;
    border: 3px solid #000;
    border-top-color: #ffe100;
    animation: tongue 1s ease-in-out infinite;
}
/* 胳膊 */
.arm_left ,
.arm_right{
    width: 50px;
    height: 65px;
    background-color: #ffe100;
    position: absolute;
    top: 50px;
    left: 20px;
    border: 4px solid #000;
    border-bottom-left-radius: 40% 90%;
    border-bottom-right-radius: 40% 90%;
    border-top-color: #ffe100;
    transform: skew(16deg)
}
.arm_right {
    left:  95px;
    transform: skew(-16deg)
}
/* 腿 */
.leg_left,
.leg_right {
    width: 47px;
    height: 19px;
    border: 4px solid #000;
    background-color: #ffe100;
    position: absolute;
    border-radius: 80% 20% 80% 10%;
    top: 356px;
    left: 164px;
}
.leg_right {
    border-radius:20% 80%  10% 80%;
    left: 293px;
}
/* 尾巴 */
.tail1 {
    width: 127px;
    height: 70px;
    background-color: #ffe100;
    border: 4px solid #000;
    position: absolute;
    top: 100px;
    left: -8px;
    transform: skew(-20deg)
}
.tail2 {
    width: 66px;
    height: 149px;
    background-color: #ffe100;
    border: 4px solid #000;
    position: absolute;
    top: 134px;
    left: 96px;
    transform: skew(-20deg)
}
.tail3 {
    width: 42px;
    height: 87px;
    background-color: #ffe100;
    border: 4px solid #000;
    position: absolute;
    top: 235px;
    left: 140px;
    transform: skew(-20deg)
}
/* 尾巴阴影 */
.tail_shading {
    width: 29px;
    height: 183px;
    background-color: #ffe100;
    position: absolute;
    top: 113px;
    left: 118px;
    transform: skew(16deg);
}
/*  尾巴摇摆*/
.tail {
    animation: tail 0.4s ease-in-out infinite;
}
/* 吐舌头动画 */
@keyframes tongue {
    0% {
        height: 3px;
    }
    30% {
        width: 20px;
        height: 32px;
    }
    100% {
        height: 3px;
    }
}
/* 尾巴摇摆动画 */
@keyframes tail {
    0% {
        transform-origin: 250px 250px;
        transform: rotateZ(0deg);
    }
    60% {
        transform-origin: 250px 300px;
        transform: rotateZ(10deg);
    }
    100% {
        transform-origin: 250px 300px;
        transform: rotateZ(0deg);
    }
}
